<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>cool-canvas</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .canvas {
            position: absolute;
        }
    </style>
</head>

<body>
    <canvas id="canvas" class="canvas"></canvas>
</body>
<script>
    class Meteor {
        constructor(ctx, width, height) {
            this.ctx = ctx
            this.width = width
            this.height = height
            this.tx = 0
            this.ty = 0

            this.r = 1.2
            this.PI_2 = Math.PI * 2
            this.sx = 4
            this.sy = 0
            this.minLen = 1
            this.maxLen = 8
            this.len = 0

            this.center = 5
            this.changeColor = 0
            this.color = 0

            this.randomXY()
        }

        setColor(color) {
            this.changeColor = color
            if (this.color === 0) {
                this.color = this.changeColor
            }
        }

        randomXY() {
            this.tx = Math.random() * width
            this.ty = Math.random() * height
            this.color = this.changeColor
            this.len = this.minLen
        }

        draw(mx, my) {

            let c = Math.sqrt(Math.pow(this.tx - mx, 2) + Math.pow(this.ty - my, 2))
            if (c <= 10 || Math.random() > 0.99) {
                this.randomXY()
            } else {
                this.tx -= (this.tx - mx) * this.len / c
                this.ty -= (this.ty - my) * this.len / c
            }

            if (this.len < this.maxLen) {
                this.len += 0.05
            }

            ctx.fillStyle = this.color
            ctx.beginPath()
            ctx.arc(this.tx, this.ty, this.r, 0, this.PI_2, true)
            ctx.closePath()
            ctx.fill()
        }
    }

    let width = window.innerWidth
    let height = window.innerHeight

    let count = 180

    let meteors = []


    let colors = [
        "rgb(80, 214, 39)",
        "rgb(196, 214, 39)",
        "rgb(39, 161, 214)",
        "rgb(214, 91, 39)",
        "rgb(214, 39, 115)"
    ]

    let mouseX = 0
    let mouseY = 0

    let canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d')
    canvas.width = width
    canvas.height = height

    init()
    setInterval(run, 20)

    function init() {
        document.onmousemove = onDocMouseMove
        document.onmouseout = onDocMouseOut
        mouseX = width / 2
        mouseY = height / 2

        for (let i = 0; i < count; ++i) {
            meteors[i] = new Meteor(ctx, width, height)
        }
    }

    function onDocMouseMove(e) {
        let ev = e ? e : window.event
        mouseX = ev.clientX
        mouseY = ev.clientY
    }

    function onDocMouseOut(e) {
        mouseX = width / 2
        mouseY = height / 2
    }

    let f = -1
    let color = 0

    function run() {
        ctx.globalCompositeOperation = "source-over"
        ctx.fillStyle = "rgba(8, 8, 12, 0.4)"
        ctx.fillRect(0, 0, width, height)
        ctx.globalCompositeOperation = "lighter"

        for (let i = 0; i < count; ++i) {
            meteors[i].setColor(colors[color])
            meteors[i].draw(mouseX, mouseY)
        }
        f++
        if (f === 200) {
            f = -1
            color++
            if (color === colors.length) {
                color = 0
            }
        }
    }
</script>

</html>